<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex Layout</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="../bootstrap-4.1.3-dist/css/bootstrap.css">
    <script src="../bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
    <script src="../libs/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

    <style type="text/css">

    </style>
</head>
<body>
<div class="container">
    <!--<div class="d-flex bg-primary">d-flex</div>-->
    <!--<div class="d-sm-flex bg-primary">d-sm-flex</div>-->
    <!--<div class="d-md-flex bg-primary">d-md-flex</div>-->
    <!--<div class="d-lg-flex bg-primary">d-lg-flex</div>-->
    <!--<div class="d-xl-flex bg-primary">d-xl-flex</div>-->


    <!--<div class="d-inline-flex bg-primary">d-inline-flex</div>-->
    <!--<div class="d-sm-inline-flex bg-primary">d-sm-inline-flex</div>-->
    <!--<div class="d-md-inline-flex bg-primary">d-md-inline-flex</div>-->
    <!--<div class="d-lg-inline-flex bg-primary">d-lg-inline-flex</div>-->
    <!--<div class="d-xl-inline-flex bg-primary">d-xl-inline-flex</div>-->

    <!--<div class="d-flex bg-primary flex-row">-->
    <!--<div class="bg-info">AAA</div>-->
    <!--<div class="bg-warning">BBB</div>-->
    <!--<div class="bg-danger">CCC</div>-->
    <!--</div>-->
    <!--<div class="d-sm-flex bg-primary flex-sm-row">-->
    <!--<div class="bg-info">AAA</div>-->
    <!--<div class="bg-warning">BBB</div>-->
    <!--<div class="bg-danger">CCC</div>-->
    <!--</div>-->
    <!--<div class="d-md-flex bg-primary flex-md-row">-->
    <!--<div class="bg-info">AAA</div>-->
    <!--<div class="bg-warning">BBB</div>-->
    <!--<div class="bg-danger">CCC</div>-->
    <!--</div>-->
    <!--<div class="d-lg-flex bg-primary flex-lg-row">-->
    <!--<div class="bg-info">AAA</div>-->
    <!--<div class="bg-warning">BBB</div>-->
    <!--<div class="bg-danger">CCC</div>-->
    <!--</div>-->
    <!--<div class="d-xl-flex bg-primary flex-xl-row">-->
    <!--<div class="bg-info">AAA</div>-->
    <!--<div class="bg-warning">BBB</div>-->
    <!--<div class="bg-danger">CCC</div>-->
    <!--</div>-->

    <!--<div class="d-flex bg-primary flex-column">-->
    <!--<div class="bg-info">AAA</div>-->
    <!--<div class="bg-warning">BBB</div>-->
    <!--<div class="bg-danger">CCC</div>-->
    <!--</div>-->
    <!--<div class="d-flex bg-primary flex-sm-column">-->
    <!--<div class="bg-info">AAA</div>-->
    <!--<div class="bg-warning">BBB</div>-->
    <!--<div class="bg-danger">CCC</div>-->
    <!--</div>-->
    <!--<div class="d-flex bg-primary flex-md-column">-->
    <!--<div class="bg-info">AAA</div>-->
    <!--<div class="bg-warning">BBB</div>-->
    <!--<div class="bg-danger">CCC</div>-->
    <!--</div>-->
    <!--<div class="d-flex bg-primary flex-lg-column">-->
    <!--<div class="bg-info">AAA</div>-->
    <!--<div class="bg-warning">BBB</div>-->
    <!--<div class="bg-danger">CCC</div>-->
    <!--</div>-->
    <!--<div class="d-flex bg-primary flex-xl-column">-->
    <!--<div class="bg-info">AAA</div>-->
    <!--<div class="bg-warning">BBB</div>-->
    <!--<div class="bg-danger">CCC</div>-->
    <!--</div>-->

    <!--<div class="d-flex bg-primary justify-content-around">-->
    <!--<div class="bg-info">AAA</div>-->
    <!--<div class="bg-warning">BBB</div>-->
    <!--<div class="bg-danger">CCC</div>-->
    <!--</div>-->
    <!--<div class="d-flex bg-primary justify-content-sm-around">-->
    <!--<div class="bg-info">AAA</div>-->
    <!--<div class="bg-warning">BBB</div>-->
    <!--<div class="bg-danger">CCC</div>-->
    <!--</div>-->
    <!--<div class="d-flex bg-primary justify-content-md-around">-->
    <!--<div class="bg-info">AAA</div>-->
    <!--<div class="bg-warning">BBB</div>-->
    <!--<div class="bg-danger">CCC</div>-->
    <!--</div>-->
    <!--<div class="d-flex bg-primary justify-content-lg-around">-->
    <!--<div class="bg-info">AAA</div>-->
    <!--<div class="bg-warning">BBB</div>-->
    <!--<div class="bg-danger">CCC</div>-->
    <!--</div>-->
    <!--<div class="d-flex bg-primary justify-content-xl-around">-->
    <!--<div class="bg-info">AAA</div>-->
    <!--<div class="bg-warning">BBB</div>-->
    <!--<div class="bg-danger">CCC</div>-->
    <!--</div>-->

    <!--<div class="d-flex bg-primary">-->
    <!--<div class="bg-info flex-xl-fill">AAA</div>-->
    <!--<div class="bg-warning flex-xl-fill">BBB</div>-->
    <!--<div class="bg-danger flex-xl-fill">CCC</div>-->
    <!--</div>-->

    <!--<div class="d-flex bg-primary flex-nowrap">-->
        <!--<div class="bg-info" style="width: 400px">AAA</div>-->
        <!--<div class="bg-warning" style="width: 500px">BBB</div>-->
        <!--<div class="bg-danger" style="width: 700px">CCC</div>-->
    <!--</div>-->

    <!--<div class="d-flex bg-primary align-items-end flex-wrap" style="height: 400px; border: 1px solid brown">-->
        <!--<div class="bg-info" style="width: 400px">AAA</div>-->
        <!--<div class="bg-warning" style="width: 500px">BBB</div>-->
        <!--<div class="bg-danger" style="width: 700px">CCC</div>-->
    <!--</div>-->


    <!--<div class="d-flex bg-primary" style="height: 400px; border: 1px solid brown">-->
        <!--<div class="bg-info align-self-start" style="width: 400px">AAA</div>-->
        <!--<div class="bg-warning align-self-center" style="width: 500px">BBB</div>-->
        <!--<div class="bg-danger align-self-end" style="width: 700px">CCC</div>-->
    <!--</div>-->

    <div class="d-flex bg-primary flex-wrap align-content-start pl-3" style="height: 400px; border: 1px solid brown">
        <div class="bg-info" style="width: 400px">AAA</div>
        <div class="bg-warning" style="width: 500px">BBB</div>
        <div class="bg-danger" style="width: 700px">CCC</div>
    </div>
</div>
</body>
</html>